<template>
  <div class="create-excercise-container">
    <el-card>
      <!-- 先只考虑一道单选题 -->
      <div class="front_controls">
        <!-- 选择框 -->
        <el-select v-model="selectItem" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <!-- 创建按钮 -->
        <el-button @click="createTopic" type="primary">创建</el-button>
      </div>
      <div class="showBox">
        <span v-show="selectItem.length == 0" class="tip"
          >请先选择题目类型</span
        >
        <!-- 可编  -->
        <!-- some explianation,     hao -->
        <single-choice :type="'edit'" v-if="selectItem == 'sc'"></single-choice>
        <!-- 后续在edit_block中有新的就可以在这里加if -->
        <blank-question v-else-if="selectItem == 'bl'"></blank-question>
        <essay-question v-else-if="selectItem == 'an'"></essay-question>
        <true-or-false v-else-if="selectItem == 'tof'"></true-or-false>
        <multiple-choice v-else-if="selectItem == 'mc'"></multiple-choice>
      </div>
    </el-card>
    <!-- 往这里挂载 -->
    <rich-editor v-if="richEditorVisible"></rich-editor>
  </div>
</template>

<script>
import SingleChoice from "@/components/edit_blocks/SingleChoice.vue";
import BlankQuestion from "@/components/edit_blocks/BlankQuestion.vue";
import EssayQuestion from "@/components/edit_blocks/EssayQuestion.vue";
import TrueOrFalse from "@/components/edit_blocks/TrueOrFalse.vue";
import MultipleChoice from "@/components/edit_blocks/MultipleChoice.vue";
import RichEditor from "@/components/RichEditor2.vue";
import { Message } from "element-ui";
import { createTopic } from "@/services/teacher/topic";
// import { TopicTypes } from "@/utils/constant";
export default {
  name: "CreateExercise",
  components: {
    SingleChoice,
    BlankQuestion,
    EssayQuestion,
    TrueOrFalse,
    MultipleChoice,
    RichEditor,
  },
  data() {
    return {
      options: [
        {
          value: "sc",
          label: "单选",
        },
        {
          value: "mc",
          label: "多选", //multiplate choice
        },
        {
          value: "tof",
          label: "判断", //True or false
        },
        {
          value: "bl",
          label: "填空", //Blank
        },
        {
          value: "an",
          label: "问答", //Answer
        },
      ],
      selectItem: "",
      id: 10,
      isEdit: false,
    };
  },
  methods: {
    selectCorrectOpt(opt, index) {
      this.topic.answer = index;
    },
    changeValue(v) {
      // console.log(v);
      this.value = v;
    },
    // 创建题目的回调
    createTopic() {
      const type = this.selectItem;
      // console.log("create Topic...");
      // 加入到题库
      // 把题目id但是题目不在这里
      const { topic } = this;
      // 可能topic还需要加工，例如填空，格式又要变成其他的至少是input的
      const topicCopy = {
        ...topic,
        category: [type],
      };
      createTopic(type, topicCopy).then((res) => {
        // this.$codeJudge(res.data.code, "创建成功", "创建失败");
        if (res.data.code == 200) {
          // this.selectItem = "";
          const { tid } = res.data.data;
          new BroadcastChannel("topic").postMessage({
            tid,
            ...this.topic,
            topicType: this.selectItem,
          });
          // alert("创建成功！");
          Message.success("创建成功");

          console.log(tid);
        }
      });
    },
  },
  computed: {
    topic() {
      return this.$store.state.topicAbout.topic;
    },
    richEditorVisible() {
      return this.$store.state.editorAbout.editorVisble;
    },
    // selectItem() {
    //   return this.$store.state.topicAbout.currentType;
    // },
  },
  mounted() {
    this.defaultContextMenu = document.oncontextmenu;
    document.oncontextmenu = null;
  },
  beforeDestroy() {
    document.oncontextmenu = this.defaultContextMenu;
  },
};
</script>

<style lang="less" scoped>
.create-excercise-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .el-card {
    width: 500px;
    min-height: 350px;
    .front_controls {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
    }
    .showBox {
      width: 100%;
      min-height: 250px;
      border: 1px dashed #ccc;
      border-radius: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>